<template>
  <div class="shop">
    <div class="shopSearch">
      <div>
        <em class="iconfont" @click="shopSearchContent">&#xe61b;</em>
        <input type="text" v-model="fullTextFilterStr" placeholder="搜索"  @input="shopSearchContent">
      </div>
    </div>
    <div class="shopGoodManger">
      <div v-for="(item,index) in goodsAgentAccountSet.list" class="shopGoodMangerEvey">
            <Checkbox v-model="item.checked" @on-change="on_change(item)"></Checkbox>
            <img :src="item.goodsBigPic" v-if="item.goodsBigPic">
            <img src="../../assets/img/noImg.png" v-else/>
            <div class="shopGoodsDes">
              <p>{{item.goodsName}}</p>
              <p>{{item.goodsSkuValue}}</p>
              <p class="shopLastDes">
                ¥{{Public.formatMoney(item.goodsSalePrice,2)}}
                <em class="iconfont" @click="shopDesShow(item,index)">&#xe613;</em>
              </p>
              <div class="show-body" v-show="index===vue_index && dialogShow">
                <i class="arrow-show"></i>
                <span @click="editBtn(item,index)">编辑</span>
                <span @click="downUpBtn(item,index)">下架</span>
                <span @click="extendBtn(item,index)">推广</span>
              </div>
            </div>
      </div>
    </div>
    <div class="shopFootInteractive" >
      <span class="redBtn" @click="addGoods" >添加商品</span>
      <span class="downBtn" @click="batchRelease">批量下架</span>
    </div>

    <share-out @closeShowBtn="closeShow_share" v-show="shareShow" :closeShare="shareShow"></share-out>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui'; //引入弹框
  import shareOut from '../../components/share/share';
  export default{
    components:{shareOut},
    data(){
        return{
          shareShow:false,   //分享框弹出
          //初始化页面数据
          goodsAgentAccountSet:{
              list:[],
          },
          fullTextFilterStr:"",   //搜索（关键字）
          vue_index:null,    //控制某行推广、下架按钮显示隐藏
          dialogShow:false,   //弹出按钮或关闭按钮
          vue_row_GoodsCodeStr:[],  //（拼接）goodsCode
        }

    },
    watch:{
      //监视index变化，控制按钮弹出
      vue_index:function(val,oldVal){
        if(val != oldVal){
           this.dialogShow = true;
        }
      },
    },
    methods:{

      //编辑
      editBtn(item,index){
        this.vue_index = index;
        this.$router.push({path:'/editShopGoods'})
      },


      //关闭分享弹出框
      closeShow_share(){
        this.shareShow = false;
      },

      //点击单行（推广）按钮
      extendBtn(item,index){
        this.shareShow = true;
        this.dialogShow = false;
      },

      //点击单行（下架）按钮
      downUpBtn(item,index){
        this.dialogShow = false;
        this.axios({
          method: 'POST',
          url: "/v3/sale/goodss/deleteAgentGoods",
          data: {
            "memberCode":localStorage.getItem("memberCode"),
            "goodsCode":item.goodsCode,
          }
        }).then((res) => {
          Toast({
            message: '操作成功！',
            iconClass: 'fontSize iconfont icon-chenggong'
          });
          this.queryByPage();
        }).catch((err) => {
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      //批量下架
      batchRelease(){
        this.vue_row_GoodsCodeStr = this.vue_row_GoodsCodeStr.toString();
        this.axios({
          method: 'POST',
          url: "/v3/sale/goodss/deleteAgentGoods",
          data: {
            "memberCode":localStorage.getItem("memberCode"),
            "goodsCode":this.vue_row_GoodsCodeStr,
          }
        }).then((res) => {
          this.vue_row_GoodsCodeStr = [];
          this.queryByPage();
          Toast({
            message: '操作成功！',
            iconClass: 'fontSize iconfont icon-chenggong'
          });
        }).catch((err) => {
          this.vue_row_GoodsCodeStr = [];
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      //复选框（选中）
      on_change(item){
          if(item.checked){
            this.vue_row_GoodsCodeStr.push(item.goodsCode);
          }else{
            this.vue_row_GoodsCodeStr.forEach((item1,index,arr) =>{
              if(item.goodsCode == item1){
                this.vue_row_GoodsCodeStr.splice(index, 1);
              }
            })
          }
      },

      //（点击）下架或推广的显示、隐藏
      shopDesShow(item,index){
        this.vue_index = index;
        this.dialogShow = !this.dialogShow;
      },

      //添加商品
      addGoods(){
        this.$router.push({path:"/goodsCategory"})
      },

      //页面初始化数据
      queryByPage(){
        this.axios({
          method: 'POST',
          url: "/v3/sale/goodss/queryGoodsToAgentAccountByPage",
          data: {
              "memberCode":localStorage.getItem("memberCode"),
              "fullTextFilterStr":this.fullTextFilterStr,
          }
        }).then((res) => {
          this.goodsAgentAccountSet.list = res.data.list;
          this.goodsAgentAccountSet.list.forEach((item,index,arr) =>{
            this.$set(item, 'checked', false);
          });
        }).catch((err) => {
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      //（搜索）框
      shopSearchContent(){
        this.queryByPage();
      },

    },

    mounted(){},

    activated(){
      //初始化页面数据
      this.queryByPage();
      document.querySelector('#vue_id_title').innerHTML="商品管理";
    },

    deactivated(){
      this.dialogShow = false;     //离开页面时，关闭弹框
    },
  }
</script>
<style scoped>

  .downBtn{
    background: white;
  }

  .show-body{
    position: relative;
    opacity: 0.9;
  }

  /*.show-body span:hover{*/
    /*color: #D50B0A;*/
  /*}*/

  .arrow-show{
    position: absolute;
    right: -18px;
    top: 10px;
    display: block;
    border-bottom: 4px solid transparent;
    border-left: 8px #333 solid;
    border-top: 6px transparent solid;
    border-right: 10px transparent solid;
    opacity: 0.9;
  }

  .redBtn{
    background: #D50B0A;
    color: white;
  }

  .shopSearch{
    text-align: center;
  }

.shopSearch input{
  width: 90%;
  border-radius: .2rem;
  border: 0;
  height: .87rem;
}

.shopSearch{
  width: 90%;
  background: #fff;
  margin: .3rem auto .3rem;
  border-radius: .2rem;
}

.shopGoodManger{
  /*padding-bottom: 37px;*/
  background:#fff;
  border-top:1px solid #ddd;
}

.shopGoodMangerEvey{
  padding: .4rem .2rem 0;
  border-bottom:1px solid #ddd;
  display: -webkit-box;
  overflow: hidden;
}

.shopGoodMangerEvey label{
  line-height:2rem;
}

.shopGoodManger img{
  width: 2rem;
  height: 2rem;
}

.shopGoodsDes{
  height:2.7rem;
  padding-bottom: .2rem;
  -webkit-box-flex: 1;
}

.shopGoodsDes .shopLastDes{
  color: #D50B0A;
  font-size: 14px;
}

.shopGoodsDes .shopLastDes em{
  float: right;
  border: 1px solid #8c878c;
  width: 1.1rem;
  text-align: center;
  border-radius: 5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #8c878c;
}

.shopGoodsDes p{
  font-size: 12px;
  padding: 0 0.3rem;
  line-height: 0.65rem;
}

  .shopGoodsDes p:nth-child(2){
      color: #999999;
  }

.shopGoodsDes div{
  background: #333;
  width: 45%;
  color: #fff;
  height: .8rem;
  position: relative;
  line-height: .8rem;
  top: -.8rem;
  float: right;
  margin-right: 1.7rem;
}
.shopGoodsDes div span{
  display: inline-block;
  width: 33.3%;
  text-align:center;
  float:left;
  font-size: 12px;
}

.shopFootInteractive{
  position: fixed;
  bottom: 0;
  height: 1rem;
  line-height: 1rem;
  width: 100%;
  z-index: 100;
  display: -webkit-box;
}
.shopFootInteractive span{
  -webkit-box-flex: 1;
  text-align: center;
  display: block;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 5px #ccc;
  border-radius: .1rem;
}
.active{
  color:#fff;
  background:#e51c23;
}
</style>
